<template>
	<div
		ref="containerTarget"
		class="group relative p-0.5 rounded-xl border-white dark:border-zinc-200 duration-500 hover:bg-red-100/40"
	>
		<div>
			<!-- 搜索图标 -->
			<m-svg-icon
				name="search"
				color="#707070"
				class="w-1.5 h-1.5 absolute translate-y-[-50%] top-[50%] left-2"
			></m-svg-icon>

			<!-- 输入框 -->
			<input
				ref="inputTarget"
				class="group-hover:bg-white dark:group-hover:bg-zinc-900 group-hover:border-zinc-200 dark:group-hover:border-zinc-700 duration-500 block w-full h-[44px] pl-4 outline-0 text-sm bg-zinc-100 dark:bg-zinc-800 caret-zinc-400 rounded-xl text-zinc-900 dark:text-zinc-200 tracking-wide font-semibold border border-zinc-100 dark:border-zinc-700 focus:border-red-300"
				type="text"
				placeholder="搜索"
				v-model="inputValue"
				@keyup.enter="onSearchHandler"
				@focus="onFocusHandler"
			/>

			<!-- 删除按钮 -->
			<m-svg-icon
				v-show="inputValue"
				name="input-delete"
				class="duration-500 h-1.5 w-1.5 absolute translate-y-[-50%] top-[50%] right-9 cursor-pointer"
				@click="onClearClick"
			></m-svg-icon>

			<!-- 分割线 -->
			<div
				class="group-hover:opacity-100 duration-500 bg-zinc-200 opacity-0 h-1.5 w-[1px] absolute translate-y-[-50%] top-[50%] right-[62px]"
			></div>

			<!-- 搜索按钮 -->
			<m-button
				class="group-hover:opacity-100 opacity-0 duration-500 absolute translate-y-[-50%] top-[50%] right-1 rounded-full"
				icon="search"
				iconColor="#fff"
				@click="onSearchHandler"
			></m-button>

			<!-- 下拉区 -->
			<transition name="search-tip">
				<div
					v-if="$slots.dropdown"
					v-show="isFocus"
					class="scrollbar-thin scrollbar-thumb-transparent xl:scrollbar-thumb-zinc-200 xl:dark:scrollbar-thumb-zinc-900 scrollbar-track-transparent max-h-[368px] w-full text-base overflow-auto bg-white dark:bg-zinc-800 absolute z-20 left-0 top-[56px] p-2 rounded border border-zinc-200 dark:border-zinc-600 duration-200 hover:shadow-2xl"
				>
					<slot name="dropdown"></slot>
				</div>
			</transition>
		</div>
	</div>
</template>

<script>
// 更新事件
const EMIT_UPDATE_MODELVALUE = 'update:modelValue'
// 触发搜索（点击或回车）事件
const EMIT_SEARCH = 'search'
// 删除所有文本事件
const EMIT_CLEAR = 'clear'
// 输入事件
const EMIT_INPUT = 'input'
// 获取焦点事件
const EMIT_FOCUS = 'focus'
// 失去焦点事件
const EMIT_BLUR = 'blur'
</script>

<script setup>
import { ref, watch } from 'vue'
import { useVModel, onClickOutside } from '@vueuse/core'

const props = defineProps({
	modelValue: {
		required: true,
		type: String,
	},
})

const inputValue = useVModel(props)

const emits = defineEmits([
	EMIT_UPDATE_MODELVALUE,
	EMIT_CLEAR,
	EMIT_INPUT,
	EMIT_FOCUS,
	EMIT_BLUR,
	EMIT_SEARCH,
])

watch(inputValue, (val) => {
	emits(EMIT_INPUT, val)
})

const onClearClick = () => {
	inputValue.value = ''
	emits(EMIT_CLEAR, '')
}
const inputTarget = ref(null)
const onSearchHandler = () => {
	inputTarget.value.blur()
	emits(EMIT_SEARCH, inputValue.value)
}

const isFocus = ref(false)
const containerTarget = ref(null)

const onFocusHandler = () => {
	isFocus.value = true
	emits(EMIT_FOCUS)
}

const onBlurHandler = () => {
	emits(EMIT_BLUR)
}

onClickOutside(containerTarget, () => (isFocus.value = false))

defineExpose({
	isFocus,
})
</script>

<style scoped lang="scss">
.search-tip-enter-from,
.search-tip-leave-to {
	opacity: 0;
	transform: translateY(150%);
}

.search-tip-enter-active,
.search-tip-leave-active {
	transition: all 0.3s ease-in-out;
}
</style>
